<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<script type="text/javascript" src="./js/swiper-bundle.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/swiper-bundle.css">
</head>

<body>
	<div class="nav ">
		<div class="banner">
			<img src="https://www.buchouwang.com/img/logo.a2dacc49.png">
		</div>
		<div class="nav-center">
			<a href="./po.html" class="item-on">首页 <span></span></a>
			<a href="javascript:;"class="product">产品介绍 <span></span>
				<div class="Invisibility">
				<div class="subnav"></div>
			</div>
			</a>
			
			<a href="./sec.html">解决方案 <span></span></a>
			<a href="./cases.html">案例展示 <span></span></a>
			<a href="./news.html">新闻中心 
				<span></span>
				
			</a>
			<a href="./about.html">关于我们 <span></span></a>
			<a href="./careers.html">加入我们 
				<span></span>
			</a>
			<a href="./pig.html" >生猪交易 <span></span></a>
			<a href="./demo.html">申请演示 <span></span></a>
		</div>
	</div>
	<div class="swiper mySwiper">
		      	<div class="swiper-wrapper">
			        <div class="swiper-slide">
			        	<div class="backG">不愁养猪
			        		<img src="./img/left.png">
			        	</div>
			        	<img src="https://www.buchouwang.com/img/banner1.0a300ac3.png	">
			        </div>
			        <div class="swiper-slide">
			        	<div></div>
			        	<img src="https://www.buchouwang.com/img/banner2.7e325cdf.png">
			        </div>
			        <div class="swiper-slide">
			        	<img src="https://www.buchouwang.com/img/banner3.551ff5bd.png">
			        </div>
		        </div>
		    <div class="swiper-pagination"></div>
		    <div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
		    <div class="swiper-button-next"></div><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
  </div>
  <!-- 产品介绍 -->
  <div class="head-center">
  	<div class="con">
  		<h1>产品介绍</h1>
  			<span class="conMore">了解更多 ——></span>
  	<div class="product-wrap">
  		<div class="itemWrap">

  		</div>
  	</div>
  	</div>
  	
  </div>
  <!-- 新闻中心 -->
  	<div class="body-news">
			<div class="body-new">
			<div class="newCenter">
				新闻中心
				<span class="newMore">了解更多 ——></span>
			</div>
			<div class="new-body">
				<div class="new-tab">
					<ul class="new-list">
						<li class="new-list-top liston">
							公司动态
							<div class="listly"></div>
						</li>
						<li class="new-list-top">
							行业动态
							<div class="listly"></div>
						</li>
					</ul>
				</div>
				<div class="new-text action">
					<div class="new-text-top">
					</div>
					<div class="new-text-list">
						<ul class="newtext-list">
						</ul>
					</div>
				</div>
				<div class="new-text">
					<div class="new-text-top">
					</div>
					<div class="new-text-list">
						<ul class="newtext-list">
						</ul>
					</div>
				</div>
			</div>
			</div>
		</div>
		<!-- 轮播图 -->
			<div class="body-cor">
			<div class="cor-title">
				解决方案
				<span class="cor-more">了解更多 ——></span>
			</div>
			<div class="swiper2 mySwiper2">
      <div class="swiper-wrapper myapp">
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
    
      </div>
    </div>
		</div>
		 <!-- Swiper -->

<!-- 案例展示 -->
<div class="body-case-n">
			<div class="body-case">
				<div class="case-title">
					案例展示
					<span class="case-more">了解更多 ——></span>
				</div>
				<div class="case-body">
					
				</div>
			</div>
		</div>
		<div class="body-cor">
			<div class="cor-title">
				标杆客户列表
				<span class="cor-more">了解更多 ——></span>
			</div>
			<div class="cor-body">
				
			</div>
		</div>	
	</div>
<!-- 网页底部 -->
		<div class="font-bottom">
				<div class="font-center">
						<div class="font-left">
							<ul>
								<li class="item">
										<div class="first-title">首页</div>
								</li>
								<li class="item">
									  <div class="first-title">产品介绍</div>
									  <div class="second-title">合同放养管理解决方案</div>
									  <div class="second-title">猪场解决方案</div>
									  <div class="second-title">生猪交易平台</div>
									  <div class="second-title">不愁养禽解决方案</div>
									  <div class="second-title">不愁养牛解决方案</div>
									  <div class="second-title">不愁养虾解决方案</div>
									  <div class="second-title">智慧运输解决方案</div>
									  <div class="second-title">物联网、智能设备</div>
								</li>
								<li class="item">
									<div class="first-title">解决方案</div>
									<div class="first-title">案例展示</div>
									<div class="first-title">新闻中心</div>
									<div class="second-title">公司动态</div>
									<div class="second-title">行业动态</div>
								</li>
								<li class="item">
									<div class="first-title">关于我们</div>
									<div class="first-title">加入我们</div>
									<div class="first-title">生猪交易</div>
									<div class="first-title">申请演示</div>
								</li>
							</ul>
						</div>
						<div class="font-right">
								<div class="first-title">联系我们</div>
								<div class="second-title">电话：0532-89089019</div>
								<div class="second-title">15898816599（栾延康）</div>
								<div class="second-title">地址：青岛市李沧区九水东路130号亚马逊AWS联合创新中心8楼</div>
								<div class="thred-title">订阅我们</div>
								<div class="second-title">第一时间最大幅的获得最新动态</div>
								<div class="sub-wrap">
								<input type="text" placeholder="请输入您的邮箱" class="sub-input"><div class="sub-botton">订阅</div>
								</div>
						</div>
				</div>
				<div class="footer-bottom">
						<div class="center-wrap">
								<div class="footer-number">Copyright © 2016-2017 不愁网（北京）信息科技有限公司 版权所有 丨 京ICP备17022714号-1</div>
						</div>
				</div>
		</div>
	<script type="text/javascript">
		
		// 跨域： ajax请求的地址与当前页面地址不同源，叫跨域
		// 不同源： 协议名 (http, https), ip地址，端口号，只要有任意一个不相同，就是不同源
		let xhr = new XMLHttpRequest
		xhr.open('get', "stage-api/website/getProductMenuInfo")
		xhr.send()
		xhr.onreadystatechange = function() {
			if(xhr.readyState == 4) {
				console.log(JSON.parse(xhr.responseText))
			}
		}
		/*
			解决方法： 
				jsonp: 可以解决主流的跨域数据访问， 但是只能解决get
				cors（跨域资源共享）： 少数ie不支持
				proxy代理转发

		*/
	</script>
	<script type="text/javascript" src="ajax.js"></script>
	<script type="text/javascript" src="jquery-3.2.1.js"></script>
	<script type="text/javascript">
		//跳转产品介绍
		let pro = document.querySelector(".product")
		pro.onclick=function (){
			location.href=`po.html?id=15`
		}


		//跳转
		function solve(){
			location.href = `solve.html`
		}
			//二级导航
			let subnav = document.querySelector(".subnav")
			ajax({
			  method: "get",
			  url: "stage-api/website/getProductMenuInfo",
			}).then(res => {
			  for(let i = 0; i < res.data.length; i++){
			    if (i == 4) {
			      continue;
			    }else if(i == 6){
			      continue;
			    }else{
			    	console.log(res.data[i].productId)
			      subnav.innerHTML += `<div class="subtag" onclick=detail('${res.data[i].productId}')>
			                            <img src=${res.data[i].menuIcon.split("?")[0]}>
			                            <p>${res.data[i].productName}</p >
			                            </div>`
			    }
			  }
			})
			  
			  function detail(detail){
			  	console.log(detail)	
			    location.href = `po.html?productId=${detail}`
			  }
			   $(".product").hover(function(){
				  $(".Invisibility").css("display", "block")
				}, function(){
				  $(".Invisibility").css("display", "none")
				})

			   let backG = document.querySelector(".backG")
			   backG.onclick = function(){
			   	location.href = "./pig.html"
			   }



		 var swiper = new Swiper(".mySwiper", {
        // slidesPerView:2,//一页里面放几个
        spaceBetween: 20,//每个之间的间隔
        // 自动轮播
        autoplay: true ,
        // 无限循环
        loop: true ,
        // 分页器

        pagination: {
          el: ".swiper-pagination",
          clickable: true //是否能点击
        },
         navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
		 

		 //渲染产品介绍
		 let itemWrap = document.querySelector(".itemWrap")
		 ajax({
		 	method:"get",
		 	url:"stage-api/website/getProductMenuInfo"
		 })
		 .then(res => {
		 	console.log(res)
		 	for (let i = 0; i < res.data.length; i++){
		 		itemWrap.innerHTML += `<div onclick=detail(${res.data[i].productId})><h3>${res.data[i].productName}</h3><p>${res.data[i].productName}</p></div>`
		 		let ph = res.data[i].logoPhotoAddress.split("?")[0]
		 		document.querySelectorAll(".itemWrap div")[i].style.backgroundImage = `url(${ph})`
		 	}
		 })
		 // 渲染新闻
		let newTt = document.querySelectorAll('.new-text-top')
		let newTul = document.querySelectorAll('.newtext-list')
		ajax({
  		method: 'get',
  		url: "stage-api/website/getNewsList",
  		params: {
    		pageNum: 1,
    		pageSize: 4,
    		newsType: 1
  			},
		})
		.then(res => {
    console.log(res)
    newTt[0].innerHTML += `<div class="newtext-top-left">
						<img src="${res.rows[0].newsPic}"></div>
						<div class="newtext-top-right">
						<div class="newtextR-title">${res.rows[0].newsName}</div>
						<div class="newtextR-text">${res.rows[0].remark}</div>
						<div class="newtextR-tool">
						<div class="toolL">查看详情</div>
						<div class="toolR">2022-07-12</div>
						</div>
								 	</div>`
    for (let i = 1; i < res.rows.length; i++) {
      newTul[0].innerHTML += `<li class="newtextL">
              <span class="dot"></span>
              <span class="text">${res.rows[i].newsName}</span>
              <span class="time">${res.rows[i].createTime.split(" ")[0]}</span>
              </li>`
    }
  })
				 // 渲染新闻第二页
ajax({
  method: 'get',
  url: "stage-api/website/getNewsList",
  params: {
    pageNum: 1,
    pageSize: 4,
    newsType: 2
  },  
	})
.then(res => {
    console.log(res)
    newTt[1].innerHTML += `<div class="newtext-top-left">
						<img src="${res.rows[0].newsPic}"></div>
						<div class="newtext-top-right">
						<div class="newtextR-title">${res.rows[0].newsName}</div>
						<div class="newtextR-text">${res.rows[0].remark}</div>
						<div class="newtextR-tool">
						<div class="toolL">查看详情</div>
						<div class="toolR">2022-07-12</div>
						</div>
								 	</div>`
    for (let i = 1; i < res.rows.length; i++) {
      newTul[1].innerHTML += `<li class="newtextL">
              <span class="dot"></span>
              <span class="text">${res.rows[i].newsName}</span>
              <span class="time">${res.rows[i].createTime.split(" ")[0]}</span>
              </li>`
    }
  })

let newlist = document.querySelectorAll('.new-list-top')
let newText = document.querySelectorAll('.new-text')
for (var i = 0; i < newlist.length; i++) {
      //给每一个span造一个下标
      newlist[i].index = i
      //给每一个span添加一个点击事件
      newlist[i].onclick = function(){
        //先获取到原来有active类名的给他清空
        document.querySelector('.liston').className = 'new-list-top'
        document.querySelector('.action').className = 'new-text'
        this.className = 'new-list-top liston'
        newText[this.index].className = 'new-text action'
      } 
    }
  	
  	// 轮播图2
  	let appslide = document.querySelectorAll(".myapp  .swiper-slide")
  	ajax({
  		method: "get",
  		url: "stage-api/website/getHomePageInfo"
  	})
  	.then(res => {
  		for(let i = 0; i < res.data.solutions.length; i++){
  			appslide[i].innerHTML = `<img src=${res.data.solutions[i].solutionPhotoAddress.split("?")[0]}>`
  		}
		 var swiper2 = new Swiper(".mySwiper2", {
				// 大小
			  loop: true,
    		slidesPerView: 'auto',
    		loopedSlides: 9,
        slidesPerView: 4,
        // 可以拖动
				draggable: true,
		
				autoplay:true,
				centeredSlides: true,
        spaceBetween: 10,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        }
      })
  	})




  
//案例展示
     let casebody = document.querySelector(".case-body")
    ajax({
      method: "get",
      url: "stage-api/website/getHomePageInfo",
    })
     .then(res => {
        console.log(res)
        for (let i = 0; i < 4; i++) {
          casebody.innerHTML += `<div class="case-item" onclick=cas(${res.data.companyInfo[i].caseCompanyId})>
              <div class="caseitem-img">
              <img src="${res.data.companyInfo[i].companyLogoPhoto.split("?")[0]}">
              </div>
              <div class="caseitem-font">
              <div class="caseitem-font-title">
               ${res.data.companyInfo[i].caseCompanyName}
              <div class="caseitem-ly"></div>
              </div>
            	<div class="caseitem-font-text">${res.data.companyInfo[i].remark}</div>
              <div class="caseitem-font-time">${res.data.companyInfo[i].updateTime.split(" ")[0]}</div>
              </div>
            	</div>`
        }
      })

      function cas(caseCompanyId){
			    location.href = `cases2.html?caseCompanyId=${caseCompanyId}`
			  }
//客户列表
    let corimg = document.querySelector('.cor-body')
    ajax({
      method: "get",
      url: "stage-api/website/coo/list",
    })
    .then(res => {
        console.log(res)
        for (let i = 0; i < res.rows.length; i++) {
          corimg.innerHTML += `<div class="cor-item">
              <div class="coritem-body">
              <div class="coritem-img">
              <img src="${res.rows[i].logoUrl}">
             	</div>
              </div>
              </div>`
        }
      })
  	
	</script>
</body>
</html>